/* eslint-disable no-tabs */
<template>
    <div class="wrapper">
    <div class="map" id="china_map" style='width:600px;height:400px;'> </div>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/map/js/china')
export default {
  name: 'ChinaMap',
  data () {
    return {
      rightProvince: ''
    }
  },
  mounted () {
    // 初始化echarts实例
    this.chinachart = echarts.init(document.getElementById('china_map'))
    // 进行相关配置
    this.chartOption = {
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: function (params) {
          var res = ''
          res += params.name + '</br>'
          res += '一流高校数量' + ':' + params.data.value + '</br>'
          return res
        }
      },
      // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
      visualMap: { // 左下角的颜色区域
        type: 'piecewise', // 定义为分段型 visualMap
        min: 0,
        max: 1000,
        itemWidth: 40,
        bottom: 60,
        left: 20,
        pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
          {gt: 14, lte: 35, label: '14~35', color: 'orangered'}, // (900, 1000]
          {gt: 10, lte: 14, label: '10~14', color: '#ff9800'}, // (500, 900]
          {gt: 7, lte: 10, label: '7~10', color: '#ffeb3b'}, // (310, 500]
          {gt: 1, lte: 7, label: '1~7', color: '#9adcfa'}, // (200, 300]
          {gt: 0, lte: 1, label: '0~1', color: '#6ad86e'}, // (10, 200]
          {value: 0, label: '无数据', color: '#999'} // [0]
        ]
      },
      // geo配置详解： https://echarts.baidu.com/option.html#geo
      geo: { // 地理坐标系组件用于地图的绘制
        map: 'china', // 表示中国地图
        roam: false, // 是否开启鼠标缩放和平移漫游
        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
        label: {
          show: true
        },
        itemStyle: { // 地图区域的多边形 图形样式。
          borderColor: 'rgba(0, 0, 0, 0.2)',
          emphasis: { // 高亮状态下的多边形和标签样式
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [
        {
          name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
          type: 'map',
          geoIndex: 0,
          label: {
            show: true
          },
          // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
          data: [{
            'name': '北京',
            'value': 33
          },
          {
            'name': '安徽',
            'value': 3
          },
          {
            'name': '陕西',
            'value': 8
          },
          {
            'name': '四川',
            'value': 8
          },
          {
            'name': '辽宁',
            'value': 4
          },
          {
            'name': '上海',
            'value': 14
          },
          {
            'name': '黑龙江',
            'value': 4
          },
          {
            'name': '吉林',
            'value': 3
          },
          {
            'name': '江苏',
            'value': 15
          },
          {
            'name': '天津',
            'value': 5
          },
          {
            'name': '福建',
            'value': 2
          },
          {
            'name': '浙江',
            'value': 3
          },
          {
            'name': '宁夏',
            'value': 1
          },
          {
            'name': '青海',
            'value': 1
          },
          {
            'name': '山东',
            'value': 3
          },
          {
            'name': '新疆',
            'value': 2
          },
          {
            'name': '山西',
            'value': 1
          },
          {
            'name': '湖北',
            'value': 7
          },
          {
            'name': '西藏',
            'value': 1
          },
          {
            'name': '重庆',
            'value': 2
          },
          {
            'name': '云南',
            'value': 1
          },
          {
            'name': '河南',
            'value': 2
          },
          {
            'name': '河北',
            'value': 2
          },
          {
            'name': '湖南',
            'value': 4
          },
          {
            'name': '广东',
            'value': 5
          },
          {
            'name': '贵州',
            'value': 1
          },
          {
            'name': '广西',
            'value': 1
          },
          {
            'name': '海南',
            'value': 1
          },
          {
            'name': '甘肃',
            'value': 1
          },
          {
            'name': '内蒙古',
            'value': 1
          },
          {
            'name': '江西',
            'value': 1
          }
          ]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示地图数据
    this.chinachart.setOption(this.chartOption)
    this.chinachart.on('click', (params) => {
      this.rightProvince = params.name
      this.$emit('getProvince', params.name)
    })
  }
}
</script>

<style  scoped>
.wrapper{
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
